import React from 'react'
import {List, InputItem, Icon, WingBlank,} from 'antd-mobile'
import './search.css'
import ClickableBtn from "../../shared-components/ClickableBtn/ClickableBtn"
import constants from "../../utils/constants"
import {connect,} from 'react-redux'
import {GameDataArrayToObject, GameDataObjectFinalized} from "../../redux/game";
import FootballGameCard from "../../shared-components/FootballGameCard/FootballGameCard";
import NoDataPage from "../game/Football/NoDataPage/NoDataPage";
import SearchGameCard from "./SearchGameCard/SearchGameCard";
import {goBack} from "../../utils/goback";
import CancelIcon from "../../res/images/web/game/cancel@2x.png"

class SearchContainer extends React.Component {

    constructor(props) {
        super(props)
        this.today = this.props.game.today
        this.state = {
            searchQuery: '',
            result: [],
            searched: false,
        }
    }

    componentDidMount() {

        const {
            today,
            games,
            // searchQuery,
        } = this.props.game

    }



    setSearchQuery = (val) => {
        this.setState({
            searchQuery: val,
        })
    }

    search = (query) => {
        // this.props.
        this.props.doFetchGameListAll({date: this.today})
            .then(() => {
                // const query = this.state.searchQuery
                const games = this.props.game.games[this.today]
                const {
                    events,
                    matches,
                    stages,
                    teams,
                } = games

                const eventArr = []
                const teamArr = []
                let matchArr = []

                const isObjectInclude = (query, obj) => {
                    let keys = Object.keys(obj)
                    for (let i = 0; i < keys.length; i++) {
                        let key = keys[i]
                        let val = String(obj[key])
                        if (val.includes(query)) {
                            return true
                        }
                    }
                    return false
                }

                Object.values(events).map(event => {
                    if (isObjectInclude(query, event)) {
                        eventArr.push(event)
                    }
                })

                Object.values(teams).map(teams => {
                    if (isObjectInclude(query, teams)) {
                        teamArr.push(teams)
                    }
                })

                for (let i = 0; i < matches.length; i++) {
                    let match = matches[i]
                    let eventId = match[1]
                    let homeTeamId = match[5][0]
                    let awayTeamId = match[6][0]
                    for (let j = 0; j < eventArr.length; j++) {
                        let event = eventArr[j]
                        if (event.id === eventId) {
                            matchArr.push(match)
                        }
                    }
                    for (let j = 0; j < teamArr.length; j++) {
                        let team = teamArr[j]
                        if (team.id === homeTeamId || team.id === awayTeamId) {
                            matchArr.push(match)
                        }
                    }
                }
                matchArr = Array.from(new Set(matchArr))
                matchArr.sort((a, b) => a[2] - b[2])
                let result = matchArr.map(match => {
                    const gameObjInit = GameDataArrayToObject(match)
                    const gameObjFinal = GameDataObjectFinalized(gameObjInit, teams, events, stages)
                    return gameObjFinal
                })

                this.setState({
                    result,
                    // searchQuery: '',
                    searched: true,
                })
            })

        // this.setState({
        //     searchQuery: '',
        // })
    }

    hotSearch = (e) => {
        const value = e.target.innerHTML
        this.search(value)
    }

    onCancel = () => {
        this.setState({
            result: [],
            searchQuery: '',
            searched: false,
        })
    }

    render() {
        const searchText = (
            <span
                style={{color: constants.themeColor,}}
                // onClick={() => this.props.history.goBack()}
                onClick={() => this.search(this.state.searchQuery)}
            >搜索</span>
        )
        const cancelText = (
            <span
                style={{color: '#333',}}
                onClick={() => {
                    this.setState({searchQuery: '',})
                    // this.props.history.goBack()
                    goBack(this.props.history)
                }}
            >取消</span>
        )

        const hotSearch = (
            <WingBlank>
                <p className='home-search-title'>
                    热门搜索
                </p>
                <div className='flex flex-wrap-container'>
                    <ClickableBtn
                        active='false'
                        onClick={(e) => this.hotSearch(e)}
                    >
                        欧冠
                    </ClickableBtn>
                    <ClickableBtn
                        active='false'
                        onClick={(e) => this.hotSearch(e)}
                    >
                        英超
                    </ClickableBtn>
                    <ClickableBtn
                        active='false'
                        onClick={(e) => this.hotSearch(e)}
                    >
                        世界杯
                    </ClickableBtn>
                </div>
            </WingBlank>
        )

        const val = this.state.searchQuery
        const result = this.state.result
        const searched = this.state.searched
        const resultTemplate = <div style={{overflowY: 'scroll', height: 'calc(100% - 60px)',}}>
            {searched
                ? <p style={{
                    color: '#333',
                    fontSize: '16px',
                    margin: '18px',
                    fontWeight: '500',
                }}>赛事</p>
                : null
            }
            {result.map(game => <SearchGameCard game={game} key={game.matchId}/>)}
        </div>
        const hint = <div
            className='home-search-hint'
        >
            <span>仅提供当天赛事搜索</span>
        </div>

        // const

        const SearchInput = (
            <div
                className='fixed-full-container full-width-fff-background'
            >
                <List>
                    <div style={{borderBottom: '1px solid #F8F8F8', position: 'relative'}}>
                        <InputItem
                            prefixListCls='home-search-input am-list'
                            // clear
                            placeholder='直播名称/视频名称'
                            extra={val.length > 0 ? searchText : cancelText}
                            value={val}
                            onChange={val => this.setSearchQuery(val)}
                            type='search'
                        >
                            <Icon type='search'/>
                        </InputItem>
                        <img
                            alt=''
                            src={CancelIcon}
                            style={{height: 28, width: 28, position: 'absolute', top: '50%', right: '36px', transform: 'translate(-50%, -50%)'}}
                            onClick={this.onCancel}
                        />
                    </div>

                </List>
                {hint}
                {searched ? null : hotSearch}
                {result.length === 0 && searched? <NoDataPage/> : resultTemplate}
            </div>

        )
        return SearchInput
    }

}

const mapState = state => ({
    game: state.game,
})

const mapDispatch = dispatch => ({
    doFetchGameListAll: (payload) => dispatch.game.doFetchGameListAll(payload),
})

export default connect(mapState, mapDispatch)(SearchContainer)
